<template>
  <div class="headerBox">
    <main class="swiper">
      <div>
        <div class="root">
          <header>
            <div class="btnLoginIn" @click="btnLoginIn">登录</div>
            <div class="download">
              <div>下载App</div>
            </div>
            <img class="logo" src="http://www.songguolife.com/nuts/images/download_sgIcon.png" alt="">
            <br>
            <img class="title" src="http://www.songguolife.com/nuts/images/download_type.png" alt="">
            <br>
            <img class="des" src="http://www.songguolife.com/nuts/images/download_slogon.png" alt="">
            <div class="down-arrow">
              <img src="http://www.songguolife.com/nuts/images/m_k.png" alt="">
            </div>
          </header>
          <transition name="hoverShow">
            <img class="pic-image" v-if="firstShow==true" src="http://image.songguolife.com/43069db813984e7fb89ce4b04ee531b8" alt="">
            <img class="pic-image" v-if="secondShow==true" src="http://image.songguolife.com/339f262128304847929396eebf12c914" alt="">
            <img class="pic-image" v-if="thirdShow==true" src="http://image.songguolife.com/37517943a72743aba611c3ef066a8b6d" alt="">
          </transition>
          <div class="pic">
            <section @mouseenter="firstEnter" @mouseleave="firstLeave">
              <p class="title">| 壹 |</p>
              <p class="des">沙龙 | 如果可以对你生活的城市做一点改变，你会做什么？</p>
            </section>
            <section @mouseenter="secondEnter" @mouseleave="secondLeave">
              <p class="title">| 贰 |</p>
              <p class="des">岳野支路 | 穿越非洲大陆，结伴说唱歌手，探访非洲贫民窟，与巫医兼泰拳老师交朋友</p>
            </section>
            <section @mouseenter="thirdEnter" @mouseleave="thirdLeave">
              <p class="title">| 叁 |</p>
              <p class="des">分享 | 一场青春成年礼</p>
            </section>
          </div>
        </div>
      </div>
    </main>
    <section class="bannerShow">
      <div>
        <img src="http://image.songguolife.com/43069db813984e7fb89ce4b04ee531b8" alt="">
          <div>
            <p>沙龙｜如果可以对你生活的城市做一点改变，你会做什么？</p>
          </div>
      </div>

      <div>
        <img src="http://image.songguolife.com/339f262128304847929396eebf12c914" alt="">
        <div>
          <p>
            岳野支路|穿越非洲大陆，结伴说唱歌手，探访非洲贫民窟，与巫医兼泰拳老师交朋友
          </p>
        </div>
      </div>
      <div>
        <img src="http://image.songguolife.com/37517943a72743aba611c3ef066a8b6d" alt="">
        <div>
          <p>分享｜一场青春成年礼</p>
        </div>
      </div>
    </section>
  </div>
</template>
<script>

  import axios from "axios"
  import bus from "../js/bus.js"
  export default {
    name: "",
    data() {
      return {
        bannerList: [],
        firstShow:false,
        secondShow:false,
        thirdShow:false
      }
    },
    components: {},
    mounted() {
      this.refresh()
    },
    methods: {
      refresh() {
        var axiosApi = "https://bird.ioliu.cn/v1/?url=";
        axios.get(axiosApi + "http://www.songguolife.com/api/banner").then((value) => {
          console.log(value.data)
          this.bannerList = value.data
        }, (error) => {
          console.log(error)
        })
      },
      firstEnter(){
        this.firstShow = true
      },
      firstLeave(){
        this.firstShow = false
      },
      secondEnter(){
        this.secondShow = true
      },
      secondLeave(){
        this.secondShow = false
      },
      thirdEnter(){
        this.thirdShow = true
      },
      thirdLeave(){
        this.thirdShow = false
      },

      btnLoginIn(){
        bus.$emit("login")
      }
    }
  }
</script>

<style scoped>
  .btnLoginIn {
    width: 74px;
    height: 23px;
    border: 1px solid #f40;
    border-radius: 3px;
    position: absolute;
    top: 25px;
    left: 76%;
    color: #f40;
    line-height: 28px;
  }

  .download {
    width: 100%;
    height: 25px;
    line-height: 30px;
    position: absolute;
    bottom: 240px;
  }

  .download div {
    width: 100px;
    height: 100%;
    border-radius: 3px;
    color: #f40;
    border: 1px solid #f40;
    margin: 0 auto;
    font-size: 17px;
  }

  header {
    text-align: center;
    height: 710px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background: url("http://www.songguolife.com/nuts/images/shouping_bottom.png") no-repeat center bottom;
    background-color: rgb(251, 244, 234);
  }

  .swiper{
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
  }

  .pic section {
    text-align: center;
  }
  .pic-image{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 500;
    top: 0;
  }
  .hoverShow-enter-active, .hoverShow-leave-active {
    opacity: 0;
    transition: all 3s;
  }
  .hoverShow-enter-to, .hoverShow-leave{
    opacity: 1;
    transform: scale(1.2);
  }
  header img.title {
    width: 45px;
    height: auto;
    margin: 10px 0 20px 0;
  }

  .pic {
    text-align: center;
  }

  header .des {
    width: 70px;
  }

  .root > div {
    width: 100%;
    position: absolute;
    z-index: 500;
    bottom: 100px;
    text-align: center;
    font-size: 12px;
    color: rgb(164, 123, 96);
  }

  .root > div > section {
    display: inline-block;
    margin: 0 60px;
  }

  .root > div .des {
    width: 100px;
  }

  .down-arrow {
    position: absolute;
    bottom: 15px;
    width: 100%;
    height: 44px;
  }

  .bannerShow > div {
    width: 100%;
    height: 230px;
    position: relative;
    overflow: hidden;
    vertical-align:middle;

  }

  .bannerShow > div > div{
    color: #fff;
    position: absolute;
    z-index: 500;
    top: 0;
    width: 100%;
    height: 120px;
    margin-top: 60px;
    background-color: rgba(255,255,255,0.3);
    font-size: 18px;
    text-align: center;
    vertical-align: middle;
    display: flex;
    flex-direction: column;
    align-items: center;
    display: table;
  }
  .bannerShow > div > div > p{
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
  }
  .bannerShow img{
    width: 100%;
    height: auto;
    min-height: 230px;
  }

  @media (max-width: 700px) {
    header .logo {
      margin-top: 100px;
    }

    .btnLoginIn {
      display: none;
    }

    .download div {
      display: block;
    }

    .root .pic {
      display: none;
    }

    .totop {
      display: none;
    }

    .bannerShow {
      display: block;
    }
  }

  @media (min-width: 700px) {
    header .logo {
      margin-top: 240px;
    }
    .download div {
      display: none;
    }
    .bannerShow {
      display: none;
    }
  }

</style>
